<template>
	<view>
		<view class="top">
			<view>
				<view class="top_bg">
					<image src="https://img.jinghushi.com/images/0/2025/10/KjB9SKR84E4kEJB9K91f33Rr9k3E3r.png"></image>
				</view>
				<view class="tit" :class="{'isScroll':isScroll}">
					<view class="t_image">
						<text>米分商城</text>
					</view>

				</view>
			</view>

		</view>
		<view class="list_box">
			<view class="s_c_head flex_between">
				<view class="flex_box flex_align_end">
					<image src="https://img.jinghushi.com/images/9/2025/10/E838L460k3662h3ae33UZtuE2YStuY.png" mode="heightFix"></image>
					<view class="s_c_tip">米分余额 {{user_amount}}米分</view>
				</view>
				<view class="s_detail" @click="$navTo('/pages/groupbuy/businessQuota?type=1')">米分明细</view>
			</view>
			<view class="search_top">
				<view class="inp_box">
					<input class="uni-input" v-model="goods_name" placeholder="请输入商品名称" />
				</view>
				<view class="search_btn" @click="search">
					<text>搜索</text>
					<image src="https://img.jinghushi.com/images/9/2025/10/pwxpxmGJNE1GXGgapYJVFnm3nyKwF1.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="goods_list">
				<view class="g_mag" v-if="list.length>0" v-for="item,i in list" :key="i" @click="buyShop(item)">
					<image :src="item.thumb" ></image>
					<view class="g_tit">
						<text class="title">{{item.title}}</text>
						<view class="list_bottom">
							<view class="price">
								<text>{{type==1?item.agentprice: item.saleprice}}</text><text class="p_logo"
									v-if="type==2">券</text>
								<text v-if="type==1" class="p_logo">米分</text>
								<text class="price_old" v-if="type==1">{{item.productprice}}米分</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty_loading2">
				<image v-if="isloading" src="/static/loading.gif"></image>
				<view v-if="isempty">———— <text>没有更多了</text> ————</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location'])
		},
		data() {
			return {
				isScroll: false,
				isloading: false,
				isempty: false,
				page: 0,
				list: [],
				type: 0,
				goods_name: '',
				user_amount: 0, //余额信息
				miFenShopId: '',
			};
		},
		onUnload() {
		  // 页面销毁时移除，避免内存泄漏
		  uni.$off('groupCityChange');
		},
		onPageScroll(e) {
			this.isScroll = e.scrollTop > 0
		},
		onReachBottom() {
			this.getList();
		},
		onLoad() {
			this.getCreditinfo()
		},
		onShow(){
			this.getUserAmount()
		},
		methods: {
			// 获取余额
			async getUserAmount() {
				const url = 'GoodsCardCredit/getUserAmount'
				let res = await this.$axios(url, 'POST', 'pintuan')
				if (res.data.code == 200) {
					this.user_amount = res.data.data.user_amount || 0
				}
			},
			// x详情跳转
			buyShop(e) {
				let that=this
				console.log('this.miFenShopId?????',e);
				let url =  `/pages/product/product?miFenShopId=${that.miFenShopId}&id=${e.id}`
				that.$navTo(url)
			},
			async getCreditinfo() {
				if(this.miFenShopId){
					this.search()
				}else{
					let res = await this.$axios('Group/getCreditInfo', 'POST', 'pintuan')
					if (res.data.code == 200) {
						this.miFenShopId = res.data.data.goodsCardCateId
						this.search()
					}
				}
				
			},
			search() {
				this.page = 0
				this.list = []
				this.getList()
			},
			async getList() {
				this.page++;
				this.isloading = true;
				this.$axios('Lists/index', 'POST', 'shop', {
					page: this.page,
					limit: 10,
					keywords: this.goods_name,
					ccate: this.miFenShopId,
				}).then(res => {
					this.isloading = false;
					this.isempty = false
					if (res.data.code === 200) {
						const newList = res.data.data.goods || []
						this.list = [...this.list, ...newList];
						this.isempty = newList.length <= 0;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fdf8ff;

	}

	.locate {
		display: flex;
		align-items: center;

		.location_icon {
			width: 36rpx;
			height: 34rpx;
		}

		.location_down {
			width: 16rpx;
			height: 10rpx;
			margin-left: 10rpx;
		}
	}

	.goods_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.g_mag {
			width: 346rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background: #FFFFFF;
			margin-bottom: 25rpx;

			image {
				width: 346rpx;
				height: 346rpx;
			}

			.g_tit {
				padding: 15rpx;

				.title {
					width: 100%;
					height: 72rpx;
					color: #13001E;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.list_bottom {
					.price {
						color: #9A1FE8;
						font-size: 32rpx;
						font-weight: bold;

						.p_logo {
							font-size: 20rpx;
							font-weight: normal;
							margin-left: 10rpx;
						}
					}

					.price_old {
						text-decoration: line-through;
						font-size: 22upx;
						color: #999;
						margin-left: 10rpx;
					}
				}


			}
		}
	}


	.search_top {
		display: flex;
		justify-content: space-between;

		.search_btn {
			width: 160rpx;
			height: 64rpx;
			border-radius: 16rpx;
			background: #9A1FE8;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 8rpx;
			}
		}

		.inp_box {
			width: 520rpx;
			height: 64rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			border: 2rpx solid #CCCACD;
			padding: 0 10rpx;
			margin-bottom: 40rpx;

			.uni-input {
				width: 520rpx;
				height: 64rpx;
				font-size: 28rpx;
			}
		}
	}

	.top {
		.top_bg {
			height: 211px;
			width: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			position: absolute;
			// height: 75px;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 50rpx);

			.t_image {
				display: flex;
				align-items: center;

			}

			text {
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.arror_box {
				width: 40rpx;
				height: 34rpx;

				.arror {
					width: 18rpx;
					height: 34rpx;
				}
			}

		}
	}

	.tit.isScroll {
		position: fixed;
		// top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		/* 确保宽度满屏 */
		height: 88px;
		background-color: yellow;
		z-index: 9999;
		/* 提高层级，避免被遮挡 */
		padding: 20rpx 30rpx;
		/* 调整内边距 */
		box-sizing: border-box;
		/* 确保宽度包含内边距 */
		background: linear-gradient(180deg, #9A1FE8 0%, #FFFFFF 100%);
		border-bottom: 2px solid #CCCACD;
	}

	.list_box {
		position: relative;
		top: -40px;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fdf8ff;
		z-index: 2;
		overflow: hidden;
		padding: 0 20rpx 60rpx;
	}

	.rule_content {
		line-height: 50rpx;
		color: #13001E;
	}

	.s_c_head {
		padding: 30rpx 0;

		.flex_align_end {
			position: relative;
			padding-left: 16rpx;

			image {
				height: 30rpx;
				margin-right: 14rpx;
			}

			&::before {
				content: "";
				width: 4rpx;
				height: 26rpx;
				background: #9A1FE8;
				position: absolute;
				left: 0;
				top: 2rpx;
			}
		}

		.s_c_tip {
			font-size: 24rpx;
			color: #9A1FE8;
		}
		.s_detail{
			color: #9A1FE8;
			font-weight: bold;
		}
	}
</style>